<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>门店列表 - 智能洗护中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#35C2C1',
                        secondary: '#FF7D00',
                        dark: '#333333',
                        light: '#F5F5F5',
                        gray: '#999999',
                        lightgray: '#EEEEEE'
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .store-card {
                transition: all 0.2s ease;
            }
            .store-card:hover {
                transform: translateY(-3px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            }
            .region-tag {
                transition: all 0.2s ease;
            }
            .region-tag.active {
                background-color: #35C2C1;
                color: white;
            }
            .fade-in {
                animation: fadeIn 0.3s ease-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-dark min-h-screen">
    <!-- 小程序容器 -->
    <div class="max-w-md mx-auto bg-white min-h-screen relative">
        <!-- 顶部导航栏 -->
        <header class="bg-white text-dark py-4 px-5 flex justify-between items-center fixed top-0 left-0 right-0 max-w-md mx-auto z-10 border-b border-lightgray">
            <a href="index.html" class="text-dark">
                <i class="fa fa-arrow-left text-lg"></i>
            </a>
            <div class="text-lg font-bold">门店列表</div>
            <div class="w-6"></div> <!-- 占位元素，使标题居中 -->
        </header>

        <!-- 主内容区 -->
        <main class="pt-16 pb-16">
            <!-- 搜索和定位区域 -->
            <div class="bg-white p-4 border-b border-lightgray">
                <div class="relative">
                    <input type="text" id="regionSearch" placeholder="搜索地区或门店..." class="w-full pl-10 pr-4 py-2.5 border border-lightgray rounded-lg text-sm focus:outline-none focus:border-primary">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray"></i>
                </div>
                
                <!-- 定位信息 -->
                <div class="flex items-center mt-3 text-sm">
                    <i class="fa fa-map-marker text-primary mr-2"></i>
                    <span>当前城市：广州市</span>
                    <button class="text-primary ml-2">切换</button>
                </div>
            </div>
            
            <!-- 热门地区标签 -->
            <div class="bg-white p-4 border-b border-lightgray">
                <h3 class="text-sm font-medium mb-3">热门地区</h3>
                <div class="flex flex-wrap gap-2">
                    <span class="region-tag active px-3 py-1 rounded-full text-sm" data-region="all">全部地区</span>
                    <span class="region-tag px-3 py-1 bg-lightgray rounded-full text-sm" data-region="yuexiu">越秀区</span>
                    <span class="region-tag px-3 py-1 bg-lightgray rounded-full text-sm" data-region="tianhe">天河区</span>
                    <span class="region-tag px-3 py-1 bg-lightgray rounded-full text-sm" data-region="haizhu">海珠区</span>
                    <span class="region-tag px-3 py-1 bg-lightgray rounded-full text-sm" data-region="baiyun">白云区</span>
                    <span class="region-tag px-3 py-1 bg-lightgray rounded-full text-sm" data-region="panyu">番禺区</span>
                    <span class="region-tag px-3 py-1 bg-lightgray rounded-full text-sm" data-region="huangpu">黄埔区</span>
                </div>
            </div>
            
            <!-- 门店列表 -->
            <div class="bg-white">
                <div class="p-4 border-b border-lightgray flex justify-between items-center">
                    <h3 class="font-medium">门店列表</h3>
                    <!-- <div class="flex items-center text-sm text-gray">
                        <span>排序：</span>
                        <select class="ml-1 border-none bg-transparent text-dark focus:outline-none">
                            <option>距离最近</option>
                            <option>评分最高</option>
                            <option>最新上线</option>
                        </select>
                    </div> -->
                </div>
                
                <!-- 门店列表内容 -->
                <div id="storeContainer" class="divide-y divide-lightgray">
                    <!-- 越秀区门店 -->
                    <div class="store-card p-4 cursor-pointer" data-region="yuexiu" onclick="window.location='store-detail.html'">
                        <div class="flex">
                            <img src="https://picsum.photos/120/120?random=1" alt="智能洗护中心(北京路店)" class="w-24 h-24 rounded-lg object-cover">
                            <div class="ml-3 flex-1">
                                <div class="flex justify-between">
                                    <h4 class="text-sm font-medium">智能洗护中心(北京路店)</h4>
                                    <span class="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded">营业中</span>
                                </div>
                                
                             
                                
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-map-marker mr-1"></i>
                                    越秀区北京路123号
                                </p>
                                
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-clock-o mr-1"></i>
                                    10:00-22:00
                                </p>
                                
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-signal mr-1"></i>
                                    距离 1.2km
                                </p>
                            </div>
                        </div>
                        
                        <div class="mt-3 flex flex-wrap gap-1">
                            <span class="text-xs bg-light px-2 py-0.5 rounded">AI智能洗头</span>
                            <span class="text-xs bg-light px-2 py-0.5 rounded">头皮护理</span>
                            <span class="text-xs bg-light px-2 py-0.5 rounded">5台机器人</span>
                        </div>
                    </div>
                    
                    <!-- 天河区门店 -->
                    <div class="store-card p-4 cursor-pointer" data-region="tianhe" onclick="window.location='store-detail.html'">
                        <div class="flex">
                            <img src="https://picsum.photos/120/120?random=2" alt="智能洗护中心(天河城店)" class="w-24 h-24 rounded-lg object-cover">
                            <div class="ml-3 flex-1">
                                <div class="flex justify-between">
                                    <h4 class="text-sm font-medium">智能洗护中心(天河城店)</h4>
                                    <span class="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded">营业中</span>
                                </div>
                                
                             
                                
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-map-marker mr-1"></i>
                                    天河区天河路208号
                                </p>
                                
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-clock-o mr-1"></i>
                                    10:00-22:30
                                </p>
                                
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-signal mr-1"></i>
                                    距离 2.5km
                                </p>
                            </div>
                        </div>
                        
                        <div class="mt-3 flex flex-wrap gap-1">
                            <span class="text-xs bg-light px-2 py-0.5 rounded">AI智能洗头</span>
                            <span class="text-xs bg-light px-2 py-0.5 rounded">染发护理</span>
                            <span class="text-xs bg-light px-2 py-0.5 rounded">8台机器人</span>
                        </div>
                    </div>
                    
                    <!-- 海珠区门店 -->
                    <div class="store-card p-4 cursor-pointer" data-region="haizhu" onclick="window.location='store-detail.html'">
                        <div class="flex">
                            <img src="https://picsum.photos/120/120?random=3" alt="智能洗护中心(江南西店)" class="w-24 h-24 rounded-lg object-cover">
                            <div class="ml-3 flex-1">
                                <div class="flex justify-between">
                                    <h4 class="text-sm font-medium">智能洗护中心(江南西店)</h4>
                                    <span class="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded">营业中</span>
                                </div>
                                
                            
                                
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-map-marker mr-1"></i>
                                    海珠区江南西路66号
                                </p>
                                
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-clock-o mr-1"></i>
                                    09:30-21:30
                                </p>
                                
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-signal mr-1"></i>
                                    距离 3.8km
                                </p>
                            </div>
                        </div>
                        
                        <div class="mt-3 flex flex-wrap gap-1">
                            <span class="text-xs bg-light px-2 py-0.5 rounded">基础洗头</span>
                            <span class="text-xs bg-light px-2 py-0.5 rounded">头皮检测</span>
                            <span class="text-xs bg-light px-2 py-0.5 rounded">4台机器人</span>
                        </div>
                    </div>
                    
                    <!-- 白云区门店 -->
                    <div class="store-card p-4 cursor-pointer" data-region="baiyun" onclick="window.location='store-detail.html'">
                        <div class="flex">
                            <img src="https://picsum.photos/120/120?random=4" alt="智能洗护中心(新市店)" class="w-24 h-24 rounded-lg object-cover">
                            <div class="ml-3 flex-1">
                                <div class="flex justify-between">
                                    <h4 class="text-sm font-medium">智能洗护中心(新市店)</h4>
                                    <span class="text-xs bg-gray/10 text-gray px-1.5 py-0.5 rounded">休息中</span>
                                </div>
                                
                             
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-map-marker mr-1"></i>
                                    白云区机场路173号
                                </p>
                                
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-clock-o mr-1"></i>
                                    10:00-22:00
                                </p>
                                
                                <p class="text-xs text-gray mt-1 flex items-center">
                                    <i class="fa fa-signal mr-1"></i>
                                    距离 5.2km
                                </p>
                            </div>
                        </div>
                        
                        <div class="mt-3 flex flex-wrap gap-1">
                            <span class="text-xs bg-light px-2 py-0.5 rounded">AI智能洗头</span>
                            <span class="text-xs bg-light px-2 py-0.5 rounded">吹干造型</span>
                            <span class="text-xs bg-light px-2 py-0.5 rounded">3台机器人</span>
                        </div>
                    </div>
                </div>
                
                <!-- 加载更多 -->
                <div class="text-center py-4">
                    <button id="loadMoreBtn" class="px-6 py-2 border border-primary text-primary rounded-full text-sm flex items-center justify-center mx-auto">
                        <i class="fa fa-refresh mr-1"></i>
                        加载更多
                    </button>
                </div>
            </div>
        </main>

        <!-- 底部导航 -->
        <footer class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-lightgray py-2 px-8">
            <div class="flex justify-between">
                <a href="index.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="store-list.html" class="flex flex-col items-center text-primary">
                    <i class="fa fa-map-marker text-lg"></i>
                    <span class="text-xs mt-1">门店</span>
                </a>
                <a href="appointment.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-calendar text-lg"></i>
                    <span class="text-xs mt-1">预约</span>
                </a>
                <a href="my-page.html" class="flex flex-col items-center text-gray">
                    <i class="fa fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </footer>
    </div>

    <script>
        // 地区标签筛选功能
        document.querySelectorAll('.region-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                // 更新标签活跃状态
                document.querySelectorAll('.region-tag').forEach(t => {
                    t.classList.remove('active', 'bg-primary', 'text-white');
                    t.classList.add('bg-lightgray');
                });
                this.classList.add('active', 'bg-primary', 'text-white');
                this.classList.remove('bg-lightgray');
                
                const selectedRegion = this.getAttribute('data-region');
                filterStoresByRegion(selectedRegion);
            });
        });
        
        // 搜索框筛选功能
        document.getElementById('regionSearch').addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase().trim();
            
            if (searchTerm === '') {
                // 如果搜索为空，恢复当前选中的地区筛选
                const activeRegion = document.querySelector('.region-tag.active').getAttribute('data-region');
                filterStoresByRegion(activeRegion);
            } else {
                // 执行搜索筛选
                document.querySelectorAll('.store-card').forEach(store => {
                    const storeName = store.querySelector('h4').textContent.toLowerCase();
                    const storeAddress = store.querySelector('.fa-map-marker').parentElement.textContent.toLowerCase();
                    
                    if (storeName.includes(searchTerm) || storeAddress.includes(searchTerm)) {
                        store.style.display = 'block';
                        store.classList.add('fade-in');
                    } else {
                        store.style.display = 'none';
                    }
                });
            }
        });
        
        // 根据地区筛选门店
        function filterStoresByRegion(region) {
            document.querySelectorAll('.store-card').forEach(store => {
                if (region === 'all' || store.getAttribute('data-region') === region) {
                    store.style.display = 'block';
                    store.classList.add('fade-in');
                } else {
                    store.style.display = 'none';
                }
            });
        }
        
        // 加载更多功能
        document.getElementById('loadMoreBtn').addEventListener('click', function() {
            this.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                this.innerHTML = '<i class="fa fa-refresh mr-1"></i> 加载更多';
                // 这里可以添加加载更多门店的逻辑
            }, 1000);
        });
        
        // 底部导航交互
        document.querySelectorAll('footer a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelectorAll('footer a').forEach(el => {
                    el.classList.remove('text-primary');
                    el.classList.add('text-gray');
                });
                this.classList.add('text-primary');
                this.classList.remove('text-gray');
            });
        });
    </script>
</body>
</html>
    